<template>
  <app-content class="h-panel">
    <div class="h-panel-bar"><span class="h-panel-title">币别设置</span></div>
    <div class="margin-top margin-left">
      <Button color="primary" @click="showForm=true" :style="btnStyle" v-if="accountSetsList.length">新增</Button>
      <Button @click="loadList" style="margin-left:5px">刷新</Button>
    </div>
    <div class="h-panel-body">
      <Table :datas="datas" :border="true">
        <TableItem title="操作" :width="200" align="center">
          <div class="actions" slot-scope="{data}" v-if="!data.localCurrency">
            <span @click="edit(data)" :style="fontStyle">编辑</span>
            <span @click="remove(data)" :style="fontStyle">删除</span>
          </div>
        </TableItem>
        <TableItem title="币别" prop="code"></TableItem>
        <TableItem title="名称" prop="name"></TableItem>
        <TableItem title="汇率" prop="exchangeRate"></TableItem>
        <TableItem title="是否本位币">
          <template slot-scope="{data}">
            {{data.localCurrency?'是':'否'}}
          </template>
        </TableItem>
      </Table>
    </div>
    <Modal v-model="showForm" v-bind="{closeOnMask: false, hasCloseIcon: true}">
      <div slot="header">币别设置</div>
      <Form ref="form" v-width="400" :labelWidth="100" :model="form" :rules="validationRules">
        <FormItem label="币别" prop="code">
          <input type="text" v-model="form.code" @input="checkCode" maxlength="3">
        </FormItem>
        <FormItem label="名称" prop="name">
          <input type="text" v-model="form.name">
        </FormItem>
        <FormItem label="汇率" prop="exchangeRate">
          <NumberInput v-model="form.exchangeRate"></NumberInput>
        </FormItem>
      </Form>
      <div class="text-center">
        <Button color="primary" @click="submit" :loading="loading" :style="btnStyle">{{form.id?'更新':'保存'}}</Button>
        <Button @click="showForm=false" :loading="loading">取消</Button>
      </div>
    </Modal>
  </app-content>
</template>

<script>
  import Vue from 'vue'
  import { DEFAULT_COLOR } from '@/store/mutation-types'
  import { updateTheme } from '@comp/tools/setting'

  const emptyForm = {
    "code": "",
    "name": "",
    "exchangeRate": "",
  };

  export default {
    name: 'Currency',
    data() {
      return {
        accountSetsList: [],
        datas: [],
        form: Object.assign({}, emptyForm),
        validationRules: {
          required: ["code", "name", "exchangeRate"],
          rules: {
            code: {
              maxLen: 3,
              minLen: 3,
              valid: {
                pattern: /^[A-Z]{3}$/,
                message: '需为三位的大写英文字母'
              }
            }
          }
        },
        btnStyle: { background: '', borderColor: ''},
        fontStyle: { color: ''},
        showForm: false,
        loading: false
      };
    },
    watch: {
      showForm(val) {
        if (!val) {
          this.reset();
        }
      }
    },
    mounted () {
      this.primaryColor = Vue.ls.get(DEFAULT_COLOR)
      updateTheme(this.primaryColor)
      this.btnStyle.background = this.primaryColor
      this.btnStyle.borderColor = this.primaryColor
      this.fontStyle.color = this.primaryColor
      this.initAccountSets()
      this.loadList()
    },
    methods: {
      initAccountSets() {
        this.$api.setting.accountSets.list().then(({data}) => {
          this.accountSetsList = data || [];
        })
      },
      loadList() {
        this.$api.setting.currency.list().then(({data}) => {
          this.datas = data || [];
        })
      },
      submit() {
        let validResult = this.$refs.form.valid();
        if (validResult.result) {
          this.loading = true;
          this.$api.setting.currency[this.form.id ? 'update' : 'save'](this.form).then(() => {
            this.loadList();
            this.showForm = false;
            this.loading = false;
          }).catch(() => {
            this.loading = false;
          })
        }
      },
      reset() {
        this.form = Object.assign({}, emptyForm)
      },
      remove(data) {
        this.$Confirm("确认删除?").then(() => {
          this.$api.setting.currency.delete(data.id).then(() => {
            this.loadList();
          })
        })
      },
      edit(data) {
        this.form = Object.assign({}, data)
        this.showForm = true;
      },
      checkCode() {
        this.$set(this.form, 'code', this.form.code.toUpperCase());
      }
    },
  };
</script>

<style scoped lang="less">
  .h-panel-bar {
    padding: 10px 20px;
  }
</style>